<%--
  Created by IntelliJ IDEA.
  User: Dylan
  Date: 2017/4/24
  Time: 13:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" pageEncoding="utf-8" %>
<%@ include file="/include/taglibs.jsp" %>

<script src="${path}/static/trends/trends/index.js"></script>

<div class="form-inline" role="form" id="admintoolbar">

</div>
<div class="form-inline">
    <div class="input-group col-xs-2" style="float: left;margin-right: 6px;">
        <input type="text" class="form-control entry" placeholder="请输入发布人名称" name="userName"/>
    </div>
    <button class="btn query_button" id="trendSelect" style="margin-left: 5px">
        <%--<span class="glyphicon glyphicon-search" aria-hidden="true"></span>--%>
        查询
    </button>
</div>
<table id="table"
       data-toggle="table"
       data-toolbar="#admintoolbar"
       data-url="${trendSelectPath}/findTrends"
       data-side-pagination="server"
       data-pagination="true"
       data-page-list="[5, 10, 20, 50, 100, 200]"
       data-show-refresh="true"
       data-show-columns="true">
    <thead>
    <tr>
        <th data-field="trendId">编号</th>
        <th data-field="moduleName">所属类别</th>
        <th data-field="nickName">发布人名称</th>
        <th data-field="headPicture" data-formatter="Trends.hostIcon">发布人头像</th>
        <th data-field="trendsImages" data-formatter="operateImages" data-events="operateEvents">图片</th>
        <%--<th data-field="trendsVoice" data-formatter="operateVoice" data-events="operateEvents">音频</th>--%>
        <th data-field="videoPic" data-formatter="operateAvPic" data-events="operateEvents">视频截图</th>
        <th data-field="trendsVideo" data-formatter="operateVideos" data-events="operateEvents">视频</th>
        <th data-field="praiseCount">点赞数</th>
        <th data-field="collectCount">收藏数</th>
        <th data-field="remarkCount">评论数</th>
        <th data-field="createTime">发布时间</th>
        <th data-formatter="Trends.operateFormatter" data-events="operateEvents">操作</th>
    </tr>
    </thead>
</table>

<div id="trendsComments-div" class="slidingmenu box-model box box-info" model-left="20%" model-width="80%">
    <div class="box box-info">
        <div class="box-body">
            <table id="commentTable"
                   data-toggle="table"
                   data-toolbar="#admintoolbar"
                   data-height="540"
                   data-side-pagination="server"
                   data-pagination="true"
                   data-page-list="[5, 10, 20, 50, 100, 200]">
                <thead>
                <tr>
                    <th data-field="commentId">编号</th>
                    <th data-field="nickName">评论人名称</th>
                    <th data-field="headPicture" data-formatter="Trends.hostIcon">评论人头像</th>
                    <th data-field="comment">评论内容</th>
                    <th data-field="createTime">评论时间</th>
                    <th data-formatter="Trends.commentOperateFormatter" data-events="operateEvents">操作</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
    <div class="box-footer">
        <button class="btn btn-danger close-model">关闭</button>
    </div>
</div>

<div id="trendsReplay-div" class="slidingmenu box-model box box-info" model-left="25%" model-width="75%">
    <div class="box box-info">
        <div class="box-body">
            <table id="replayTable"
                   data-toggle="table"
                   data-toolbar="#admintoolbar"
                   data-height="540"
                   data-side-pagination="server"
                   data-pagination="true"
                   data-page-list="[5, 10, 20, 50, 100, 200]">
                <thead>
                <tr>
                    <th data-field="replyId">编号</th>
                    <th data-field="reply">回复人名称</th>
                    <th data-field="receive">被回复人名称</th>
                    <%--<th data-field="identity" data-formatter="Trends.replayTypeOperateFormatter">被回复人身份</th>--%>
                    <%--<th data-field="replayIcon">回复人头像</th>--%>
                    <th data-field="createTime">回复时间</th>
                    <th data-field="content">回复内容</th>
                    <th data-formatter="Trends.replayOperateFormatter" data-events="operateEvents">操作</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
    <div class="box-footer">
        <button class="btn btn-danger close-model">关闭</button>
    </div>
</div>


<div id="detailTrends-div" class="slidingmenu box-model box box-info">
    <div class="box box-info">
        <div class="box-body">
            <div class="form-group">
                <label>互动内容:</label>
                <textarea id="detailContent" class="form-control" readonly="readonly"></textarea>
            </div>
            <div class="box-footer">
                <button class="btn btn-danger close-model">关闭</button>
            </div>
        </div><!-- /.box-body -->
    </div>
</div>

<div id="detailImages-div" class="slidingmenu box-model box box-info">
    <div class="box box-info">
        <div class="box-body">
            <div class="form-group">
                <label>互动图片:</label>
                <div id="images">

                </div>
            </div>
            <div class="box-footer">
                <button class="btn btn-danger close-model">关闭</button>
            </div>
        </div><!-- /.box-body -->
    </div>
</div>

<div id="detailVoice-div" class="slidingmenu box-model box box-info">
    <div class="box box-info">
        <div class="box-body">
            <div class="form-group">
                <label>互动音频:</label>
                <div>
                    <audio controls="controls" id="voice">
                        <%--Your browser does not support the HTML5 Audio element.--%>
                    </audio>
                </div>
            </div>
            <div class="box-footer">
                <button class="btn btn-danger close-model">关闭</button>
            </div>
        </div><!-- /.box-body -->
    </div>
</div>

<div id="detailVideoPic-div" class="slidingmenu box-model box box-info">
    <div class="box box-info">
        <div class="box-body">
            <div class="form-group">
                <label>视频截图:</label>
                <div>
                    <img id="videoPic" width="300px" height="300px">
                </div>
            </div>
            <div class="box-footer">
                <button class="btn btn-danger close-model">关闭</button>
            </div>
        </div><!-- /.box-body -->
    </div>
</div>

<div id="detailVideo-div" class="slidingmenu box-model box box-info">
    <div class="box box-info">
        <div class="box-body">
            <div class="form-group">
                <label>互动视频:</label>
                <div class="public-background">
                    <video preload="auto" id="video" loop="loop" style="object-fit:fill;width:100%;height:240px;"
                           controls
                           webkit-playsinline="true" playsinline="true">
                    </video>
                </div>
                <div id="output"></div>
            </div>

            <div class="box-footer">
                <button class="btn btn-danger close-model">关闭</button>
            </div>
        </div><!-- /.box-body -->
    </div>
</div>

<div id="detailImage-div" style="z-index:999" class="slidingmenu box-model box box-info">
    <div class="box box-info">
        <div class="box-body">
            <div class="form-group">
                <div id="image" style="margin-top: 5%">

                </div>
            </div>
            <div class="box-footer">
                <button class="btn btn-danger close-model">关闭</button>
            </div>
        </div><!-- /.box-body -->
    </div>
</div>